<template>
  <!--选项卡开始-->
  <div class="width-100-per height-100-per layout-left-top">
    <a-tabs type="card" class=" width-100-per" @change="tabsChange" :tabBarExtraContent="tabBarExtraContents">
      <a-tab-pane tab="已维修" key="1">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-tab-pane>
      <a-tab-pane tab="待维修" key="2">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-tab-pane>
      <a-tab-pane tab="待审核" key="3">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-tab-pane>
      <a-tab-pane tab="驳回" key="4">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!--选项卡结束-->
</template>

<script>
  import { Tabs,Button,Input } from 'ant-design-vue'
  export default {
    name: "Repair",
    components: {
      AButton:Button,
      AButtonGroup:Button.Group,
      ATabs:Tabs,
      ATabPane:Tabs.TabPane,
      AInput:Input,
    },
    data(){
      return{
        contentHeight:0,
        tabBarExtraContents:'已维修',
      }
    },
    computed:{
      monitorClientHeight(){
        return this.$store.getters.clientHeight;
      }
    },
    watch:{
      monitorClientHeight:function (old,now) {
        now === 0?this.contentHeight = old -132 : this.contentHeight = old - 132;
      }
    },
    mounted(){
      if(this.$store.getters.clientHeight !== 0){
        this.contentHeight = this.$store.getters.clientHeight - 132;
      }
    },
    methods: {
      tabsChange(e) {
        if(e==='1'){
          console.log('已维修1')
          this.routerSkip('/repair');
          this.tabBarExtraContents = '已维修';
        }else if(e==='2'){
          console.log('待维修2')
          this.routerSkip('/repair/unRepair');
          this.tabBarExtraContents = '待维修';
        }else if(e==='3'){
          console.log('待审核3')
          this.routerSkip('/repair/inRepair');
          this.tabBarExtraContents = '待审核';
        }else {
          console.log('驳回4')
          this.routerSkip('/repair/UnRepaired');
          this.tabBarExtraContents = '已驳回';
        }
      }
    }
  }
</script>

<style scoped>

</style>
